<template>
  <view v-if="shenheStatus == 0" class="card_container">
    <view style="padding-top: 30rpx" v-if="list.length == 0"
      ><u-empty :text="$t('common.noCard')" mode="list"></u-empty
    ></view>
    <view
      class="card_item"
      v-for="(item, index) in list"
      :key="index"
      @click="toDetail(item.id)"
    >
      <view class="item_left"
        ><image
          style="border-radius: 50rpx; width: 60rpx; height: 60rpx"
          :src="item.pic_url"
        ></image
      ></view>
      <view class="item_content">
        <view style="font-size: 34rpx; font-weight: bold">{{
          item.verify_card_name
        }}</view>
        <!-- <view style="font-size: 24rpx;">由汉堡王提供</view> -->
      </view>
      <view class="item_right">{{ $t('coupon.expire') }}</view>
      <view class="item_time">{{ item.valid_time }}</view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      listLength: '',
      list: [],
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: this.$t('title.failureCard'),
    });
  },
  onShow() {
    this.getListData();
  },
  methods: {
    toDetail(id) {
      this.$utils.toUrl('/user/write_off_card/write_off_detail?id=' + id);
    },
    async getListData() {
      try {
        const res = await this.$allrequest.coupon.verifyList({
          is_delete: 1,
        });
        if (res.code == 0) {
          this.listLength = res.data.num;
          this.list = res.data.list;
        } else {
          this.$utils.toast(res.msg);
        }
      } catch (e) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card_container {
  background-color: rgb(246, 246, 246);
  height: 100vh;
  padding: 20rpx;
}
.card_item {
  width: 100%;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  color: black;
  .item_left {
    display: inline-block;
    width: 10%;
  }
  .item_content {
    display: inline-block;
    width: 70%;
    padding-left: 30rpx;
  }
  .item_right {
    display: inline-block;
    text-align: right;
    width: 15%;
    transform: translate(20rpx, -40rpx);
  }
  .item_time {
    width: 100%;
    height: 50rpx;
    line-height: 60rpx;
    text-align: right;
    color: #666666;
  }
}
</style>
